<template>
  <div class="center">
    <vs-button color="rgb(59,222,200)" gradient @click="add_show = true">
      创建打卡
    </vs-button>
    <!-- 打卡表格 -->
    <vs-table>
      <template #thead>
        <vs-tr>
          <vs-th> 打卡名称 </vs-th>
          <vs-th> 序号 </vs-th>
        </vs-tr>
      </template>
      <template #tbody>
        <vs-tr :key="i" v-for="(tr, i) in $vs.getPage(clockin_data, page, max)">
          <vs-td>
            {{ tr.title }}
          </vs-td>
          <vs-td>
            {{ tr.id }}
          </vs-td>
          <!-- 点击之后展示的模块 -->
          <template #expand>
              <div>
                <p>
                  今天您
                  <b>{{ tr.title }}</b>
                  了吗？
                </p>
              </div>
              <div class="con-content">
                <vs-button
                  color="rgb(137,171,158)"
                  @click="do_clockin(tr)"
                >
                  打卡
                </vs-button>
                <vs-button
                  color="rgb(137,171,158)"
                  @click="del_show(tr)"
                >
                  删除
                </vs-button>
              </div>
          </template>
        </vs-tr>
      </template>
      <template #footer>
        <vs-pagination :color="color" not-margin buttons-dotted v-model="page" :length="$vs.getLength(clockin_data, max)" class="pagination"/>
      </template>
    </vs-table>
    <!-- 添加打卡的提示弹窗 -->
    <vs-dialog prevent-close v-model="add_show">
      <template #header>
        <h4 class="not-margin">开启您的一个自律打卡之旅吧！</h4>
      </template>
      <div class="con-form">
        <vs-input success v-model="new_clockin_name" placeholder="打卡名称">
          <template #icon>
            <i-add-one theme="outline" size="24" fill="#000000"/>
          </template>
        </vs-input>
      </div>
      <br />
      <template #footer>
        <div class="footer-dialog">
          <vs-button @click="add_clockin" color="rgb(137,171,158)">
            添加
          </vs-button>
        </div>
      </template>
    </vs-dialog>
    <!-- 打卡名称为空的提示弹窗 -->
    <vs-dialog prevent-close v-model="alarm_show">
      <template #header>
        <h4 class="not-margin">提示</h4>
      </template>
      <div class="con-content">
        <p>您的输入的打卡名称为空！</p>
      </div>
      <template #footer>
        <div class="footer-dialog">
          <vs-button @click="alarm_show = false" color="rgb(137,171,158)">
            Ok
          </vs-button>
        </div>
      </template>
    </vs-dialog>
    <!-- 打卡显示的提示弹窗 -->
    <vs-dialog prevent-close v-model="calendar_show">
      <calendar-model :title="current_title"></calendar-model>
    </vs-dialog>
    <!-- 再次确认删除的提示弹窗 -->
    <vs-dialog prevent-close v-model="delete_show">
      <template #header>
        <h4 class="not-margin">提示</h4>
      </template>
      <div class="con-content">
        <p>您确认删除该打卡？</p>
      </div>
      <template #footer>
        <div class="footer-dialog">
          <vs-button @click="del_clockin" color="rgb(137,171,158)">
            确定
          </vs-button>
        </div>
      </template>
    </vs-dialog>
  </div>
</template>

<script>
import axios from 'axios'
import CalendarModel from './CalendarModel.vue'
export default {
  // props:{
  //     clockin_data:[]
  // },
  data: () => ({
    color: 'success',
    editActive: false,
    edit: null,
    editProp: '',
    search: '',
    allCheck: false,
    page: 1,
    max: 3,
    active: 0,
    selected: [],
    clockin_data: [], // 所有打卡项
    current_title: '', // 当前操作的打卡名称
    current_id: 0, // 当前操作的打卡项
    new_clockin_name: '', // 添加的打卡的名称
    add_show: false, // 添加代办弹窗显示
    calendar_show: false, // 打卡日历显示
    alarm_show: false, // 打卡名称为空显示
    delete_show: false, // 再次确认删除显示
    clockin_data_len: 0
  }),
  methods: {
    add_clockin () {
      // 添加打卡
      if(this.new_clockin_name.length==0){
        this.alarm_show=true;
        return
      }
      const formData = new FormData()
      formData.append('account', this.$store.state.userinfo.account)
      formData.append('title', this.new_clockin_name)
      console.log(this.new_clockin_name)
      axios
        .post('/api/createRoutine', formData)
        .then((response) => {
          console.log(response)
          this.clockin_data.push({
            id: this.clockin_data.length + 1,
            title: this.new_clockin_name
          })
          for (var i = 0; i < this.clockin_data.length; i++) {
            this.clockin_data[i].id = i + 1
          }
          this.new_clockin_name = ''
          this.add_show = false
          console.log(this.clockin_data)
        })
        .catch((error) => {
          // 失败，处理错误
          console.error(error)
        })
    },
    del_show (tr) {
      this.current_title = tr.title
      this.current_id = tr.id
      this.delete_show = true
    },
    del_clockin () {
      // 删除打卡
      const formData = new FormData()
      formData.append('account', this.$store.state.userinfo.account)
      formData.append('title', this.current_title)
      console.log(this.current_title)
      axios
        .delete('/api/deleteRoutine', {
          params: {
            account: this.$store.state.userinfo.account,
            title: this.current_title
          }
        })
        .then((response) => {
          console.log(response)
          const index = this.clockin_data.findIndex(item => item.title === this.current_title)
          console.log(index)
          if (index !== -1) {
            this.clockin_data.splice(index, 1)
          }
          this.clockin_data.push()
          this.$forceUpdate()
          console.log(this.clockin_data)
          for (var i = 0; i < this.clockin_data.length; i++) {
            this.clockin_data[i].id = i + 1
          }
          this.current_title = ''
          this.current_id = 0
          console.log(this.clockin_data)
          this.delete_show = false
          this.$emit('del_get_refresh',"getrefresh")
        })
        .catch((error) => {
          // 失败，处理错误
          console.error(error)
        })
    },
    do_clockin (tr) {
      this.current_title = tr.title
      this.current_id = tr.id
      this.calendar_show = true
      const noti = this.$vs.notification({
        progress: 'auto',
        color: 'rgb(83,101,81)',
        position: null,
        title: '注意',
        text: ` 您点击当日日期进行打卡💕`
      })
    }
  },
  created () {
    // 获取所有打卡的名称
    console.log(this.$store.state.userinfo.account)
    console.log((this.$store.state.userinfo.account).length)
    axios
      .get('/api/showRoutine', {
        params: {
          account: this.$store.state.userinfo.account
        }
      })
      .then((response) => {
        console.log(response)
        this.clockin_data_len = response.data.data.len
        console.log(response.data.data.len)
        for (var i = 0; i < this.clockin_data_len; i++) {
          this.clockin_data.push({
            id: i + 1,
            title: response.data.data.titles[i]
          })
        }
        console.log(this.clockin_data)
      })
      .catch((error) => {
        // 失败，处理错误
        console.error(error)
      })
  },
  components: {
    CalendarModel
  }
}
</script>
<style scoped>
.center {
  background-color: #647e6037;
  border-radius: 15px;
}
.con-content{
  display: grid;
  grid-template-columns :1fr 1fr
}
</style>
</style>
